<template>
  <div class="page-header">
    <KiForm v-bind="formConfig" v-model="formData">
      <template #footer>
        <div class="footer">
          <el-button @click="handleResetClick">重置</el-button>
          <el-button type="primary" @click="handleSelectClick">查询</el-button>
        </div>
      </template>
    </KiForm>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import KiForm from '../ki-form/KiForm.vue';
const props = defineProps({
  formConfig:{
    type:Object,
    requied:true
  }
})
const emits = defineEmits(['selectClick','resetClick'])
const formOrignData:any = {}
const formItems = props.formConfig?.formItems || []
for(const item of formItems){
  formOrignData[item.field] = ''
}
const formData = ref(formOrignData)
const handleResetClick = () => {
  formData.value = formOrignData
  emits('resetClick')
}
const handleSelectClick = () => {
  emits('selectClick',{...formData.value})
}

</script>

<style scoped lang="less">
.page-header{
  border-radius: 10px;
  background-color: #fff;
  padding: 22px 22px 8px 0;
  .footer{
    text-align: right;
  }
}
</style>